<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片走马灯效果</title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body {
				height: 100%;
				background-color: #262F44;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.wrap{
				width: 220px;
				height: 520px;
				position: relative;
				transform-style: preserve-3d;
				transform: rotateX(-20deg);
				transition: 6s linear;
			}
			.wrap>div {
				position: absolute;
				top: 0;
				left: 0;
			}
			div:nth-child(6){
				opacity: 0;
			}
			div:nth-child(7){
				opacity: 0;
			}
			.wrap:hover div:nth-child(1) {
				transform:  rotateY(36deg) translateZ(220px);
				transition: 1s 2.5s;
				/*厂商前缀，为了让代码兼容Chrome浏览器*/
				-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
			}
			.wrap:hover div:nth-child(2) {
				transform: rotateY(108deg) translateZ(220px) ;
				transition: 1s 2s;
				-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
			}
			.wrap:hover div:nth-child(3) {
				transform:rotateY(180deg) translateZ(220px)  ;
				transition: 1s 1.5s;
				-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
			}
			.wrap:hover div:nth-child(4) {
				transform:rotateY(252deg) translateZ(220px)  ;
				transition: 1s 1s;
				-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
			}
			.wrap:hover div:nth-child(5) {
				transform:rotateY(324deg) translateZ(220px)  ;
				transition: 1s 0.5s;
				-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
			}
			.wrap:hover div:nth-child(6) {
				opacity: 0.8;
				transform: rotateX(90deg) translate3d(-130px,0px,255px);
				transition: 1s 3s;
			}
			.wrap:hover div:nth-child(7) {
				opacity: 1;
				transform: rotateX(-90deg) translate3d(-147px,0px,255px);
				transition: 1s ;
			}
			.wrap:hover {
				transform: rotateX(-20deg) rotateY(720deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div><img src="../../img/pic/11.png" alt=""></div>
			<div><img src="../../img/pic/12.png" alt=""></div>
			<div><img src="../../img/pic/14.png" alt=""></div>
			<div><img src="../../img/pic/15.png" alt=""></div>
			<div><img src="../../img/pic/13.png" alt=""></div>
			<div><img src="../../img/pic/01.png" alt=""></div>
			<div><img src="../../img/pic/02.png" alt=""></div>
		</div>
	</body>
</html>
